<template>
  <div>
    <!-- 饼图 -->
    <el-row style="width: 1150px; display: flex">
      <div id="Satisfaction" :style="{ width: '550px', height: '440px' }"></div>
      <div id="Credit" :style="{ width: '550px', height: '440px' }"></div>
    </el-row>
    <el-row style="display: flex">
      <!-- 满意度列表 -->
      <el-table
        ref="SatisfactionList"
        :data="SatisfactionListData"
        highlight-current-row
        stripe
        border
        style="width: 50%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>

        <el-table-column
          property="name"
          label="满意度评分"
          align="center"
          :formatter="appendStar"
        ></el-table-column>

        <el-table-column
          property="value"
          label="客户数量"
          align="center"
          :formatter="appendCount"
        ></el-table-column>
      </el-table>

      <!-- 信用度列表 -->
      <el-table
        ref="CreditList"
        :data="CreditListData"
        highlight-current-row
        stripe
        border
        style="width: 50%"
      >
        <el-table-column
          type="index"
          label="序号"
          align="center"
        ></el-table-column>

        <el-table-column
          property="name"
          label="信用度等级"
          align="center"
          :formatter="appendStar"
        ></el-table-column>

        <el-table-column
          property="value"
          label="客户数量"
          align="center"
          :formatter="appendCount"
        ></el-table-column>
      </el-table>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      SatisfactionListData: [],

      CreditListData: [],
    };
  },
  methods: {
    appendStar(row,colunm){
      return row.name+"星";
    },

    appendCount(row,colunm){
      return row.value+"个";
    },
    drawCharts() {
      this.$axios.get("/satisfy/count").then((resp) => {
        if (resp.data.status == 1000) {
          //console.log(resp.data.data);
          this.SatisfactionListData = resp.data.data;

          // 基于准备好的满意度dom，初始化echarts实例
          let Satisfaction = this.$echarts.init(
            document.getElementById("Satisfaction")
          );
          let dataSourceSatisfy = this.SatisfactionListData;
          // 绘制满意度图表
          Satisfaction.setOption({
            title: {
              text: "  满意度",
              left: "center",
              top: "center",
            },
            legend: {
              orient: "horizontal",
              formatter: function (name) {
                return name + "星";
              },
            },
            dataset: {
              source: dataSourceSatisfy,
            },
            xAxis: { type: "category", show: false },
            yAxis: {},
            // 全局调色盘。
            color: [
                "#7986ca",
                "#afd7f7",
                "#c8b4e1",
                "#f4e6ba",
                "#e6c9e1",
            ],
            series: [
              {
                type: "pie",
                radius: ["25%", "70%"],
                label: {
                  show: true,
                  position: "inner",
                  formatter: "{b}星\n{d}%",
                  fontSize: 16,
                },
              },
            ],
          });
        }
      });
      this.$axios.get("/credit/count").then((resp) => {
        if (resp.data.status == 1000) {
          //console.log(resp.data.data);
          this.CreditListData = resp.data.data;
          // 基于准备好的满意度dom，初始化echarts实例
          let Credit = this.$echarts.init(document.getElementById("Credit"));
          let dataSourceCredit = this.CreditListData;
          // 绘制满意度图表
          Credit.setOption({
            title: {
              text: "信用度",
              left: "center",
              top: "center",
            },
            legend: {
              orient: "horizontal",
              formatter: function (name) {
                return name + "星";
              },
            },
            // 全局调色盘。
            color: [
                "#1f5f61",
                "#288588",
                "#f9d5a8",
                "#e8e8e5",
                "#bba491",
            ],
            dataset: {
              source: dataSourceCredit,
            },
            xAxis: { type: "category", show: false },
            yAxis: {},
            series: [
              {
                type: "pie",
                radius: ["25%", "70%"],
                label: {
                  show: true,
                  position: "inner",
                  formatter: "{b}星\n{d}%",
                  fontSize: 16,
                },
              },
            ],
          });
        }
      });
    },
  },

  mounted() {
    this.drawCharts();
  },
};
</script>